<template>
    <div class="memeber">
        <div class="member_top">
            <div style="display:flex;margin-left: 20px;align-items: center;">
                <i v-if="termType == true" style="font-size:22px;padding-right:10px" class="el-icon-arrow-left" @click="returnClick"></i>
                <h2 class="container_top_text">{{termType == false?'团队': '团队成员'}}
                    <span v-if="termType != false" style="font-size:17px">({{termName}})</span>
                </h2>
                <!-- <div class="container_top_text_select">
                    <el-select v-model="termlistId" clearable placeholder="请选择团队" filterable :filter-method="termfilter" @change="termlistchang">
                        <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.termId">
                            <div style="display:flex;justify-content:space-between;align-items: center;">
                                <span class="margin-left:10px">{{item.name}}</span>
                                <div style="width:13%;height:100%;text-align: center;" @click.stop="tiremdelete(item)">
                                    <i class="el-icon-circle-close"></i>
                                </div>
                            </div>
                        </el-option>
                    </el-select>
                </div> -->
            </div>
            <div>
                <el-dropdown trigger="click" @command="handleCommand">
                    <el-button type="primary">
                        新建<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="teamclick" v-if="memberAddtype&&termType == false">新建团队</el-dropdown-item>
                        <el-dropdown-item command="addshow" v-if="termType == true">添加成员</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <!-- el-button  class="ge_content_right_button" icon="el-icon-plus">邀请成员</el-button>
          <el-button  class="ge_content_right_button" icon="el-icon-plus">移除成员</el-button> -->
            </div>
        </div>
        <div class="member_conter" v-if="termType == false">
            <el-card class="box-card" v-for="item in options">
                <div slot="header" style="display: flex;position:relative" class="clearfix">
                    <span style="width: 180px;overflow: hidden;display: block;white-space: nowrap;text-overflow: ellipsis;">{{item.name}}</span>
                    <el-dropdown style="position:absolute;right:0px">
                        <span class="el-dropdown-link">
                            操作按钮<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="memberClick(item)">成员列表</el-dropdown-item>
                            <el-dropdown-item @click.native="tiremdelete(item)">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-card>
        </div>
        <div class="member_conter" v-if="termType == true">
          <div class="member_conter_item" v-for="item in memberlist">
                <div class="member_conter_item_top">
                    <div style="display:flex">
                    <img class="app_project_botton_avater_image" v-if="item.avatar" :src="item.avatar" />
                    <img class="app_project_botton_avater_image" v-else src="https://img2.baidu.com/it/u=2277413437,2773342262&fm=253&fmt=auto&app=120&f=JPEG?w=516&h=500" />
                    <div style="margin-left: 14px;">
                        <div class="information">
                            <span class="information_name">{{item.userName}}
                                <span v-if="item.postName">({{item.postName}})</span></span>
                        </div>
                        <span class="information_gang">{{item.termName}}</span>

                    </div>
                    </div>
                    <div class="member_conter_item_top_icon" @click="delmember(item)">
                    <el-tooltip class="item" effect="dark" content="移出成员" placement="right">
                     <i class="el-icon-circle-close"></i>
                    </el-tooltip>
                 </div>
                </div>
                <div class="member_conter_item_buttom">
                    <span>
                        总任务：{{item.taskNum}}
                    </span>
                    <span>完成任务:{{item.taskFinishNum}}</span>
                </div>
            </div>
        </div>
        <div class="bottom" v-if="termType == true">
            <pagination v-show="total>0" :total="total" :current.sync="current" :size.sync="size" @pagination="memberclic" />
        </div>
        <el-dialog title="添加团队成员" :visible.sync="dialogVisible" width="30%" :close-on-click-modal='false'>
            <!-- <div class="member_add_text"> 注意：请先创建团队，以便后续选择成员的归属团队</div> -->
            <div class="member_add_div">从企业成员中选择</div>
            <!-- <selectRoleTwo type='warehouse' selectType='singleChoice' style="width:100%"></selectRoleTwo> -->

            <!-- <el-select v-model="termId" size="medium" placeholder="请选择团队" clearable style="display:block;margin-top:20px;width:100%;margin-bottom:20px">
                <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.termId">
                </el-option>
            </el-select> -->
            <el-select v-model="userId" multiple  clearable style="width:100%;margin-bottom:20px" placeholder="请选成员" filterable :filter-method="filtermethod" @change="userIdchange">
                <el-option v-for="avatar in usermember" :key="avatar.userId" :label="avatar.userName" :value="avatar.userId">
                    <div class="milepostselect">
                        <div class="milepostselect_div">
                            <img class="app_project_botton_avater_image" style="margin-right: 15px;" :src="avatar.avatar?avatar.avatar:'https://img2.baidu.com/it/u=2277413437,2773342262&fm=253&fmt=auto&app=120&f=JPEG?w=516&h=500'" />
                            <span class="margin-left:15px;    display: inline-block;">{{avatar.userName}}</span>
                        </div>
                    </div>
                </el-option>
            </el-select>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="termUsersave">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="添加团队" :visible.sync="teamdialogVisible" width="30%" :close-on-click-modal='false'>
            <div class="member_add_div">请输入团队名称</div>
            <el-input style="margin-bottom:20px;margin-top:10px" placeholder="请输入团队名称" v-model="team.name"> </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="teamdialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveclick">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
import utils from "@/utils/utils";
import { getAction } from "@/api/manage";
import pagination from "@/components/Pagination/index.vue";
import selectRoleTwo from "@/components/screen/selectRoleTwo";
import personInCharge from "@/components/condition/personInCharge.vue";
import { save, list as termlist, del } from "@/api/term";
import { list, getTreeData,  batchAdd,relationDel} from "@/api/termuser";
export default {
    components: {
        selectRoleTwo,
        personInCharge,
        pagination,
    },
    props: ["membershow"],
    data() {
        return {
            listQuery: {
                current: 1,
                size: 10,
                userId: undefined,
                userName: undefined,
                orgId: undefined,
            },
            team: {
                name: "",
            },
            clickmodal: true,
            termId: "",
            termlistId: "",
            dialogVisible: false,
            queryInput: "",
            memberAddtype: true,
            teamdialogVisible: false,
            options: [],
            usermember: [],
            userId: [],
            value: "",
            memberlist: "",
            current: 1,
            size: 20,
            total: 0,
            termName: "",
            termType:false
        };
    },
    created() {
        this.termlistclick();
        this.usermemberclic();
        if (this.membershow == true) {
            this.dialogVisible = true;
        }
    },
    mounted() {
        if (this.$route.name == "Details") {
            this.memberAddtype = false;
        }
    },
    methods: {
        delmember(data){
            console.log(data);
             this.$confirm("是否移出团队, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                center: true,
            })
                .then(() => {
                    let params = new URLSearchParams();
                    params.append("termId", this.termId);
                    params.append("userId", data.userId);
                    relationDel(params).then(res=>{
                        this.memberclic()
                    })
                })


        },
        filtermethod(data) {
            this.listQuery.userName = data;
            this.usermemberclic();
        },
        unique(arr) {
            const res = new Map();
            return arr.filter(
                (arr) => !res.has(arr.userId) && res.set(arr.userId, 1)
            );
        },
        async termfilter(data) {
            this.termName = data;
            await this.termlistclick();
        },
        tiremdelete(data) {
            let _this = this;
            this.$confirm("是否删除该团队, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                center: true,
            })
                .then(() => {
                    let params = new URLSearchParams();
                    params.append("ids", data.termId);
                    del(params).then((res) => {
                        _this.options.forEach(function (item, index) {
                            if (item.termId == data.termId) {
                                _this.options.splice(index, 1);
                            }
                        });
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                        this.memberclic();
                    });
                })
                .catch(() => {});
        },
        termlistchang(data) {
            this.termlistId = data;
            this.memberclic();
        },
        userIdchange(data){
            console.log(data);
            this.userId=data
        },
        termUsersave() {
            let userIds=this.userId.toString()
            let params=new URLSearchParams()
            params.append('userIds',userIds)
            params.append('termId',this.termId)
            batchAdd(params).then(
                (res) => {
                    this.$message({
                        message: "恭喜你，添加成功",
                        type: "success",
                    });
                    this.userId = [];
                    // this.termId = "";
                    this.dialogVisible = false;
                    // this.memberlist.push(res.data[0]);
                    this.memberclic()
                }
            );
        },
        async usermemberclic() {
            getAction("/sys/user/listSelectUser", {
                current: 1,
                size: 255,
            }).then((res) => {
                const { data } = res;
                this.usermember = data.records;
            });
            // let res = await userlist({ current: 1, size: 20 });
            // this.usermember =this.unique(res.data.records);
            // this.memberclic();
        },
        async memberclic() {
            let res = await list({
                current: 1,
                size: 20,
                termId: this.termlistId,
            });
            this.memberlist = res.data.records;
            this.total = res.data.total;
        },
        termlistclick() {
            let params = new URLSearchParams();
            params.append("current", this.current);
            params.append("size", this.size);
            // params.append("name", this.termName);
            termlist(params).then((res) => {
                this.options = res.data.records;
            });
        },
        saveclick() {
            save(this.team).then((res) => {
                this.$message({ message: "恭喜你，创建成功", type: "success" });
                this.teamdialogVisible = false;
                this.options.push(res.data);
                this.team.name = "";
                // this.usermemberclic();
            });
        },
        handleCommand(data) {
            if (data == "addshow") {
                this.dialogVisible = true;
                this.listQuery.userName = "";
                this.usermemberclic();
            } else {
                this.teamdialogVisible = true;
            }
        },
        currentChange() {},
        teamclick() {
            this.teamdialogVisible = true;
        },
        handleClose() {
            this.dialogVisible = false;
        },
        addshow() {
            this.dialogVisible = true;
        },
        memberClick(item) {
            this.termType = true
          this.termlistId = item.termId;
          this.termId = item.termId;
          this.termName=item.name
          this.memberclic()
            console.log(this.termId);
        },
        returnClick(){
          this.termType = false
        }
    },
};
</script>
 <style scoped>
.body {
    position: relative;
}
.memeber {
    width: 100%;
}
.member_top {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.container_top_text {
    margin: 0;
}
.container_top_text_select {
    margin-left: 15px;
}

.member_conter {
    width: 100%;
    padding-top: 14px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-left: 25px;
}
.member_conter_item {
    width: 30%;
    min-width: 250px;
    padding: 14px;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px 0px,
        rgba(9, 30, 66, 0.31) 0px 0px 1px 0px;
    box-sizing: border-box;
    border-radius: 3px;
    margin-bottom: 14px;
    margin-right: 20px;
}
.member_conter_item:hover {
    width: 30%;
    padding: 14px;
    box-shadow: 1px 1px 5px #888888;
    box-sizing: border-box;
    border-radius: 3px;
    margin-bottom: 14px;
}
.member_conter_item_top {
    display: flex;
    justify-content: space-between;
}
.app_project_botton_avater_image {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
.information {
    display: flex;
    margin-bottom: 5px;
}
.information_name {
    color: rgb(46, 64, 94);
    font-size: 18px;
}
.information_type {
    height: 20px;
    color: rgb(222, 53, 11);
    font-size: 12px;
    border: 1px solid rgb(222, 53, 11);
    border-radius: 2px;
    padding: 2px 4px 3px 4px;
    margin-left: 5px;
}
.information_gang {
    color: rgb(144, 154, 170);
    font-size: 14px;
}
.member_conter_item_buttom {
    margin-top: 8px;
    color: rgb(46, 64, 94);
    font-size: 14px;
}
.member_conter_item_buttom span {
    margin-right: 16px;
}

.member_add_text {
    background-color: #fffae6;
    color: #2e405e;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 15px;
    text-align: center;
}
.member_add_div {
    font-size: 13px;
    font-weight: 700;
    color: rgb(46, 64, 94);
    margin-bottom: 10px;
}
.popover-content-top-title {
    color: #2e405e;
    font-size: 14px;
    display: block;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
    text-align: center;
}
.popover-content-top-title:hover {
    color: #2e405e;
    font-size: 14px;
    display: block;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
    text-align: center;
    background-color: rgb(249, 249, 249);
}
.bottom {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.milepostselect_div {
    display: flex;
    align-items: center;
}
.avatar {
    border-radius: 50%;
    width: 25px;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both;
}

.box-card {
    width: 320px;
    
    height: 60px;

    margin-bottom: 20px;
    margin-right: 20px;
}
.el-card__body {
    padding: 0px !important;
}
.el-card__header {
    border-color: white !important;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
 .member_conter_item_top_icon{
     cursor: pointer;
     color: #2e405e;
 }
</style>
